<template>
  <div class="container">
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      class="commonTab"
    >
      <el-tab-pane label="专户列表" name="first">
        <specialAccountListList v-if="isShowFirst"></specialAccountListList>
      </el-tab-pane>
      <el-tab-pane
        label="拨付计划"
        name="second"
        v-if="!isHefeng"
        style="padding-top: 24px"
      >
        <allocationPlanList v-if="isShowSecond"></allocationPlanList>
      </el-tab-pane>
    </el-tabs>
    <span class="notice" v-if="firstInfo && loginQy"
      >专户列表可查询属于本企业的所有项目工资专户的详细流水情况，掌握项目专户资金动向。</span
    >
    <span class="notice" v-if="secondInfo && !loginQy"
      >查看该项目工资专户的详细资金拨付情况，掌握资金拨付周期，督促企业及时足额拨付专户款项。</span
    >
    <span class="notice" v-if="secondInfo && loginQy">{{ infoDesc }}</span>
  </div>
</template>

<script>
/*{{}}*/
import specialAccountListList from '@/components/specialAccount/specialAccountListList'
import allocatedPlanList from '@/components/specialAccount/allocatedPlanList'
import allocationPlanList from '@/components/separateAccountManagement/allocationPlanList'
export default {
  name: 'specialAccountList',
  components: {
    specialAccountListList,
    allocatedPlanList,
    allocationPlanList,
  },
  beforeRouteEnter: (to, from, next) => {
    if (
      from.path === '/home/separateAccountManagement/setAllocationPlan' ||
      from.path === '/home/separateAccountManagement/allocationPlanDetail' ||
      to.query.isShowSecond === true
    ) {
      next((vm) => {
        vm.isShowSecond = true
        vm.isShowFirst = false
        vm.activeName = 'second'
      })
    } else {
      next()
    }
  },
  data() {
    return {
      infoDesc:
        '查看隶属于本企业所有项目的工资专户的详细资金拨付情况，掌握资金拨付周期，及时足额拨付专户款项。',
      firstInfo: true,
      secondInfo: false,
      activeName: 'first',
      isShowFirst: true,
      isShowSecond: false,
      loginQy: false,
      isCZ: false,
    }
  },
  created() {
    if (
      localStorage.getItem('loginType') === 'QY' ||
      localStorage.getItem('loginType') === 'XM'
    ) {
      this.loginQy = true
    }
    if (this.isCzUser()) {
      this.isCZ = true
    }
    if (
      this.$store.state.userType === 'COMPANY' &&
      localStorage.getItem('judgeRoleCode') == 'owner'
    ) {
      this.infoDesc =
        '可审核隶属于本企业所有项目施工方申报的工资专户的详细资金拔付情况，掌握资金拔付周期，及时足额拔付专户款项'
    }
  },
  computed: {
    isHefeng() {
      return this.$store.state.isHefeng
    },
  },
  methods: {
    //tabs栏切换
    handleClick(tab, event) {
      if (tab.label == '专户列表') {
        this.isShowFirst = true
        // this.isShowSecond = false;
        this.firstInfo = true
        this.secondInfo = false
      } else if (tab.label == '拨付计划') {
        this.isShowSecond = true
        // this.isShowFirst = false;
        this.firstInfo = false
        this.secondInfo = true
      }
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  padding: 0;
}
.notice {
  position: absolute;
  top: 15px;
  left: 235px;
  font-size: 14px;
  color: #666666;
}
</style>
